<template>
  <div>
    <div class="logo">
      <img src="/static/image/logo-hei.svg">
    </div>
    <div class="menu">
      <Menu :active-name="activename" :open-names="openname" width="auto" ref="menuchild" :accordion="true">
        <!-- 只包含一级菜单 -->
        <MenuItem
          v-for="(item, index) in menuList"
          :key="index"
          v-if="!item.itemGroup"
          :name="item.path"
          :to="item.path"
        >
          <Icon type="md-document"/>
          {{item.text}}
        </MenuItem>
        <!-- 包含多级菜单 -->
        <Submenu
          v-for="(item, index) in menuList"
          :key="index"
          :name="item.path"
          v-if="item.itemGroup"
        >
          <template slot="title">
            <Icon type="ios-analytics"/>
            {{item.text}}
          </template>
          <!-- 只包含二级菜单 -->
          <MenuItem
            v-for="(subitem, subindex) in item.itemGroup"
            :key="subindex"
            :name="subitem.path"
            v-if="!subitem.items"
            :to="subitem.path"
          >{{subitem.text}}</MenuItem>
          <!-- 包含三级菜单 -->
          <Submenu
            v-for="(subitem, subindex) in item.itemGroup"
            :key="subindex"
            :name="subitem.path"
            v-if="subitem.items"
          >
            <template slot="title">{{subitem.text}}</template>
            <MenuItem
              v-for="(s_subitem, s_subindex) in subitem.items"
              :key="s_subindex"
              :to="s_subitem.path"
              :name="s_subitem.path"
            >{{s_subitem.text}}</MenuItem>
          </Submenu>
        </Submenu>
      </Menu>
    </div>
  </div>
</template>
<script>
import menudata from '@/assets/menu.json';
export default {
  data() { 
    return {
      menuList: [],
      activename: '',
      openname: []
    }
  },
  watch: {
    // 监听路由变化
    '$route' (to, from) {
      this.setMenulist(to);
    }
  },
  created() {
    // 获取本地菜单栏json数据
    this.menuList = menudata.menuList;
    // 设置菜单栏
    this.setMenulist(this.$route);
  },
  computed: {
    
  },
  methods: {
    // 设置菜单栏
    setMenulist (route) {
      this.activename = route.fullPath;
      if (route.matched[0].path != '') {
        this.openname = [route.matched[0].path];
      } else {
        this.openname = [];
      }
      let _this = this;
      this.$nextTick(()=> {
        _this.$refs.menuchild.updateOpened();        
      });
    }
  }
}
</script>
<style lang="less">
// LOGO
  .logo {
    height: @navHeight;
    padding: 16px;
    border-bottom: 1px solid #EEE;
    img {
      height: 38px;
    }
  }
  .menu {
    position: absolute;
    top: 70px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: scroll;
    .ivu-menu-vertical .ivu-menu-item, .ivu-menu-vertical .ivu-menu-submenu-title {
      text-align: left;
    }
  }

</style>
